<template>
    <div class="default">
        <el-input v-if='title === "质保金"' type='number' v-model="params.warrantyDeposit">
            <template slot="prepend">质保金</template>
        </el-input>
        <el-input v-if='title === "合同"' type='text' v-model="params.contractName">
            <template slot="prepend">合同名称</template>
        </el-input>
        <el-input v-if='title === "合同"' type='text' v-model="params.contractNumber" style="margin-top: 10px;">
            <template slot="prepend">合同编号</template>
        </el-input>
        <el-input type='textarea' style="margin:10px 0" v-model="params.remark" placeholder="请输入备注"></el-input>
        <div v-if='title === "质保金"'><span style="color:red;margin-right: 5px;">*</span>质保金凭证</div>
        <div v-if='title === "合同"'><span style="color:red;margin-right: 5px;">*</span>上传合同</div>
        <div v-if="title !== '质保金'">
            <el-upload class="upload-demo" drag :headers="headers" :accept="accept" ref="upload"
                :on-success="contractUpload" :action="`${$apiHost}` + actionUrl">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em style="color: #303e9d;">点击上传</em></div>
            </el-upload>
        </div>
        <receivedAmountUpload v-if='title === "质保金"' btnText="选择质保金凭证" style="margin-top: 10px;"
            @clearList="clearVocherList" @url="getImageUrl" />
        <div style="display: flex;justify-content: flex-end;margin-top: 20px;">
            <el-button type="primary" @click="submit" size="small" style="">提交</el-button>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import rayUpload from '@/RayComponents/rayUpload.vue';
import rayMulImageUpload from '@/RayComponents/rayMulImageUpload.vue'
import receivedAmountUpload from '@/RayComponents/receivedAmountUpload.vue';
export default {
    components: {
        rayUpload,
        receivedAmountUpload,
        rayMulImageUpload
    },
    data() {
        return {
            actionUrl: '/common/upload',
            host: this.$imgHost,
            accept: '.pdf',
            depositVoucherView: [], //预览用质保金凭证
            params: {
                warrantyDeposit: 0, //质保金
                remark: '',
                depositVoucher: '', // 质保金凭证
                contractName: '',
                contractNumber: '',
                contractView: '', //合同pdf
                aptitudeView: '', //资质pdf

            }
        }
    },
    computed: {
        headers() {
            return {
                token: this.tokenv3 || window.$quinn.getStorage("tokenv3"),
                warehouseId: this.warehouseId
            };
        },
    },
    props: {
        closeStatus: {
            type: Boolean,
            default: false
        },
        clearableStatus: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: () => { }
        }
    },
    mounted() {
        // document.addEventListener('paste', this.handlePaste)
    },
    watch: {
        closeStatus: {
            handler(newVal) {
                if (newVal) {
                    // console.log(newVal)
                    this.params.warrantyDeposit = 0;
                }
            },
            deep: true,
            immediate: true
        },
        clearableStatus: {
            handler(newVal) {
                if (newVal) {
                    // this.params.warrantyDeposit = 0;
                }
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        clearVocherList(e) {
            if (e == 'clear') {
                this.params.depositVoucher = ''
            }
        },
        submit() {
           // console.log(this.params.depositVoucher, '质保金凭证');
            //console.log(this.params.contractView, '合同pdf');
            //console.log(this.params.aptitudeView, '资质pdf');
            this.clearableStatus = false;
            this.$emit('submit')
        },
        contractUpload(e) {
            if (this.title === '合同') this.params.contractView = e.data[0];
            else this.params.aptitudeView = e.data[0];
        },
        getImageUrl(e) {
            this.depositVoucherView = e
            if (this.depositVoucherView.length > 0) {
                this.params.depositVoucher = this.depositVoucherView.join(',');
            }
        },

        handlePaste(event) {
            if (this.title !== '质保金') return;
            const clipboardData = event.clipboardData || window.clipboardData;
            if (clipboardData) {
                for (let i = 0; i < clipboardData.items.length; i++) {
                    const item = clipboardData.items[i];
                    if (item.kind === 'file' && item.type.startsWith('image/')) {
                        const file = item.getAsFile();
                        if (file) {
                            this.uploadImage(file);
                        }
                    } else {
                        this.$message.error('请拷贝图片!');
                        break;
                    }
                }
            }
        },
        uploadImage(imageFile) {
            const formData = new FormData();
            formData.append('file', imageFile);
            axios.post(`${this.$apiHost}/common/upload`, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'token': window.$quinn.getStorage("tokenv3")
                }
            })
                .then(response => {
                    this.depositVoucherView.push(response.data.data)
                    this.params.depositVoucher = this.depositVoucherView.join(',');

                })
                .catch(error => {
                    console.error('Upload failed:', error);
                });
        },
    }
}
</script>
<style lang="less" scoped>
.default /deep/ .el-button {
    border-color: #303e9d;
    background-color: #303e9d;
}

.default /deep/ .el-button:hover {
    color: white;
    border-color: #DEEDF1;
    background-color: #DEEDF1;
}

/deep/ .el-button:hover {
    color: black;
    border-color: #DCDFE6;
    background-color: white;
}

span /deep/ .el-button:nth-child(2) {
    border-color: #303e9d;
    background-color: #303e9d;
}

span /deep/ .el-button:nth-child(2):hover {
    color: white;
    border-color: #DEEDF1;
    background-color: #DEEDF1;
}

// .main /deep/ .el-select:hover{
//   border-color:#303e9d !important;
// }
//  /deep/ .el-input__inner{
//   border-color: #303e9d !important;
// } 
/deep/ .el-input__inner:hover {
    border-color: #303e9d !important;
}

/deep/ .el-input__inner:focus {
    border-color: #303e9d !important;
}

/deep/ .selected {
    color: #303e9d !important;
}

/deep/ .active {
    color: #303e9d !important;
}

/deep/ .hover {
    color: #303e9d !important;
}

/deep/ .selected {
    color: #303e9d !important;
}

/deep/ .el-loading-text {
    color: #303e9d !important;
}

/deep/ .el-icon-loading {
    color: #303e9d !important;
}
</style>